<template>
  <div>
    <div id="qualityRisk" style="overflow: auto">
      <div class="search" style="position: sitck">
        <v-condition :isMultiple="false" @getson="times"></v-condition>

        <div class="timeChoose">
          <label for="cascader">时间选择:</label>
          <el-select v-model="weeks" placeholder="请选择" @change="Fn($event)">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <el-row class="marT">
        <div id="main" style="width: 1500px; height: 600px"></div>
      </el-row>
    </div>
  </div>
</template>

<script>
var echarts = require('echarts');

import VCondition from '@/views/data/carDispose/group';
import VCharts from '@/components/charts/index';
import { mapState } from 'vuex';
import http from '@/views/sys/axios';

export default {
  data() {
    return {
      options1: [],
      val: [],
      weekdata: '',
      // 图标
      legend: {
        orient: 'horizontal',
        //orient:'inline-axis',//调排列顺序的 echarts  legend
        x: 'right', //可设定图例在左、右、居中
        y: 'top',
        padding: [60, 10, 10, 10],
        data: [],
        selected: { 总case数量: false, '残余Bug（S/A/B）': false },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
        nameLocation: 'end',
        axisLabel: { interval: 0, rotate: 1 },
      },
      yAxis: {
        // name:'百分比',
        type: 'value',
        // min:0,
        // max:5000,
        splitNumber: 10,
      },
      series: [],
      datas: {},
      weekNum: '',
      weeks: 'first',
      proId: 6195,
      options: [
        {
          value: 'first',
          label: '近八周',
        },
        {
          value: 'second',
          label: '近3个月',
        },
        {
          value: 'third',
          label: '近6个月',
        },
      ],
      value: '',
      settings: {
        labelMap: {},
      },
      periodDataEmpty: true,
      periodLoading: false,
      dataZoom: [
        {
          type: 'slider',
          start: 0,
          end: 100,
        },
      ],
    };
  },

  components: {
    VCondition,
    VCharts,
  },
  mounted() {
    this.useEchart();
    // this.getData();
    this.times()
  },
  created() {
    
  },
  methods: {

    times(data) {
      this.proId = data
      // console.log("从儿子那取得数据",this.proId);
      this.getData()
    },
    // 点击触发
    Fn(e) {
      this.getData1();
    },
    useEchart() {
      var myChart = echarts.init(document.getElementById('main'));
      this.options1 = {
        title: {
          text: '质量风险趋势图',
        },
        tooltip: {
          trigger: 'axis',
        },

        // 布局
        grid: {
          left: '3%',
          right: '1%',
          bottom: '3%',
          top: '25%',
          containLabel: true,
        },
        toolbox: {},

        xAxis: this.xAxis,
        yAxis: this.yAxis,

        // 折线图数据
        series: this.series,

        // 图标提示
        legend: this.legend,
        dataZoom: this.dataZoom,
      };
      myChart.setOption(this.options1, true);
    },
    getData() {
      
      if (this.proId === undefined) {
        this.proId = 6195;
      }

      this.series = [];
      if (this.weeks === 'first') {
        this.weekNum = 8;
      } else if (this.weeks === 'second') {
        this.weekNum = 13;
      } else if (this.weeks === 'third') {
        this.weekNum = 26;
      }
      // console.log("请求中",this.proId)
      http
        .get(
          `/api/data_summary/car/project/trend?project_id=${this.proId}&weeks=${this.weekNum}`
        )
        .then((res) => {
          // console.log(res.data);
          if (res.data[0] == null) {
            this.series = [];
            this.useEchart(); //清空重新调用
            return false;
          }
          Object.keys(res.data[0]).forEach((key, index) => {
            if (key == 'time') {
              return false;
            }
            let val = [];
            res.data.forEach((item) => {
              val.push(item[key]);
            });
            this.series.push({
              name: key, // 键名
              type: 'line',
              data: val,
            });

            this.legend.data.push(key);
          });

          // X轴数据
          let weekList = [];
          res.data.filter((item) => {
            return weekList.push(item.time);
          });
          if (this.weeks === 'first') {
            this.xAxis.data = [];
            weekList = weekList.slice(0, 8);
            this.xAxis.data = weekList;
          }
          if (this.weeks === 'second') {
            this.xAxis.data = [];
            weekList = weekList.slice(0, 13);
            this.xAxis.data = weekList;
          }
          if (this.weeks === 'third') {
            this.xAxis.data = [];
            weekList = weekList.slice(0, 26);
            this.xAxis.data = weekList;
          }
          this.useEchart();
        });
    },
    getData1() {
      this.series = [];
      if (this.weeks === 'first') {
        this.weekNum = 8;
      } else if (this.weeks === 'second') {
        this.weekNum = 13;
      } else if (this.weeks === 'third') {
        this.weekNum = 26;
      }
      // console.log("请求中",this.proId)
      http
        .get(
          `/api/data_summary/car/project/trend?project_id=${this.proId}&weeks=${this.weekNum}`
        )
        .then((res) => {
          // console.log(res.data);
          if (res.data[0] == null) {
            this.series = [];
            this.useEchart(); //清空重新调用
            return false;
          }
          Object.keys(res.data[0]).forEach((key, index) => {
            if (key == 'time') {
              return false;
            }
            let val = [];
            res.data.forEach((item) => {
              val.push(item[key]);
            });
            this.series.push({
              name: key, // 键名
              type: 'line',
              data: val,
            });

            this.legend.data.push(key);
          });

          // X轴数据
          let weekList = [];
          res.data.filter((item) => {
            return weekList.push(item.time);
          });
          if (this.weeks === 'first') {
            this.xAxis.data = [];
            weekList = weekList.slice(0, 8);
            this.xAxis.data = weekList;
          }
          if (this.weeks === 'second') {
            this.xAxis.data = [];
            weekList = weekList.slice(0, 13);
            this.xAxis.data = weekList;
          }
          if (this.weeks === 'third') {
            this.xAxis.data = [];
            weekList = weekList.slice(0, 26);
            this.xAxis.data = weekList;
          }
          this.useEchart();
        });
    },
  },
};
</script>  

<style lang="scss" scoped>
.timeChoose {
  position: absolute;
  left: 23%;
  top: 26%;
}
.search {
  position: relative;
}
</style>